// @import "variable";
// @import "mixins";
// @import "header";
// @import "foo.css";
// @import "foo" screen;
// @import "http://foo.com/bar";
// @import url(foo);

// body{
//   background-color: $primary-color;
//   color: $secondary-color;
//   @include reset-margin-padding;
// }

// $mobile-breakpoint: 768px;

// .navigation {
//   display: flex;
//   justify-content: flex-end;

//   @media (max-width: $mobile-breakpoint) {
//     flex-direction: column;
//   }
// }

// @mixin respond-to($breakpoint) {
//   @if $breakpoint == "mobile" {
//     @media (max-width: 768px) {
//       @content;
//     }
//   } @else if $breakpoint == "tablet" {
//     @media (min-width: 769px) and (max-width: 1024px) {
//       @content;
//     }
//   } @else if $breakpoint == "desktop" {
//     @media (min-width: 1025px) {
//       @content;
//     }
//   }
// }

// .container{
//   width: 80%;
//   @include respond-to("mobile"){
//     width: 100%;
//   }
//   @include respond-to("desktop"){
//     width: 70%;
//   }
// }

// .button {
//   display: inline-block;
//   padding: 20px;
//   background-color: red;
//   color: white;
// }

// .primary-button{
//   @extend .button;
//   background-color: blue;
// }

// .box {
//   border: 1px #f00;
//   background-color: #fdd;
// }

// .container {
//   @extend .box;
//   border-width: 3px;
// }

// .box.a{
//   background-image: url("/image/abc.png");
// }

// %button {
//   display: inline-block;
//   padding: 20px;
//   background-color: red;
//   color: white;
// }

// .primary-button{
//   @extend %button;
//   background-color: blue;
// }

// .secondary-button{
//   @extend %button;
//   background-color: pink;
// }

.parent {
  color: red;

  @at-root {
    .child {
      color: blue;
    }
    .test {
      color: pink;
    }
    .test2 {
      color: purple;
    }
  }
}
